<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闪现轮播2</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            position: relative;
            width: 1200px;
            height: 460px;
            margin: 100px auto;
            border: 1px solid rgba(0, 0, 0, 0.8);
        }
        .wrapper .img{
            width: 100%;
            height: 100%;
        }
        .wrapper .arr{
            position: absolute;
            top: 50%;
            width: 30px;
            height: 72px;
            margin-top: -36px;
            background-color: rgba(0, 0, 0, .3);
            font-size: 20px;
            text-align: center;
            line-height: 72px;
        }
        .wrapper .arr.arr-l{
            left:234px; 
        }
        .wrapper .arr.arr-r{
            right: 0;
        }
        .wrapper .arr:hover{
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            cursor: pointer;
        }

        .wrapper .dotts{
            position: absolute;
            bottom: 50px;
            right: 80px;
            list-style: none;
        }
        .wrapper .dotts .dott{
            float: left;
            width: 12px;
            height: 12px;
            margin-left: 15px;
            background-color: green;
            border-radius: 50%;
            cursor: pointer;
        }
        .wrapper .dotts .active{
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <img class="img" src="img/m1.jpg" alt="">
        <div class="arr arr-l" onclick="go(false)"><</div>
        <div class="arr arr-r" onclick="go(true)">></div>
        <ul class="dotts">
            <li class="dott active" data-index=0></li>
            <li class="dott" data-index=1></li>
            <li class="dott" data-index=2></li>
            <li class="dott" data-index=3></li>
            <li class="dott" data-index=4></li>
        </ul>
    </div>

    <script>
        var imgs = ['m1.jpg','m2.jpg','m3.jpg','m4.jpg','m5.jpg'];
        // 设定全局计数器
        var count = 0;
        var ownClass;
        var imgEl = document.querySelector('.img');
        var lis = document.querySelectorAll('.wrapper .dotts .dott');
        dottChange();

        // 轮播小点外观 以及 联动
        function dottChange () {
            for (var i = 0; i < lis.length; i++) {
                //依次给小点添加点击事件
                lis[i].onclick = function () {
                    // 修改图片
                    index = this.dataset.index;
                    imgEl.src = 'img/' + imgs[index];
                    // 修改小点外观
                    ownClass = document.querySelector('.dott.active');
                    ownClass.classList.remove('active');
                    this.classList.add('active');
                    //修改全局count
                    count = index;

                }
            }
        }

        //合并前进后退功能
        function go(isNext) {
            if (isNext) {
                count++;

                // 最后一张图片往前  回到第一张
                if (count === imgs.length) {
                    count = 0;
                }
            } else {
                count--;

                // 第一张图片再往前  到最后一张
                if ( count < 0 ) {
                    count = imgs.length - 1;
                }
            }

            imgEl.src = 'img/' + imgs[count];
            ownClass = document.querySelector('.dott.active');
            ownClass.classList.remove('active');
            lis[count].classList.add('active');
        }
        
    </script>
</body>
</html>